import { Outlet, useNavigate } from 'react-router-dom';
import styles from './layouy.module.scss';
import { GiBasketballBasket, GiBasketballBall  } from 'react-icons/gi';
import { CgProfile } from 'react-icons/cg';
import { useAppSelector } from '../../store/hooks';

export const Layout = () => {
	const navigate = useNavigate();
	const {token} = useAppSelector(state => state.authorization.user);
	const isAuth = false;
	const isBascet = true;
	return (
		<div className={styles.beforeContainer}>
			<div className={styles.container}>
				{token === null ? (
					<p><span onClick={() => navigate('/auth/register')} className={styles.register}>Регистрация</span><span onClick={() => navigate('/auth/login')} className={styles.login}>/Авторизация</span></p>
				) : (
					<>
						<div className={styles.profile} onClick={() => navigate('/')} color={'#ffa500'}>
							<GiBasketballBall size={50}/>
						</div>
						<div className={styles.basket} onClick={() => navigate('/cart')}>
							<span className={styles.countBalls}>{isAuth ? null : 1}</span>
							<GiBasketballBasket size={50} color={isBascet ? '#ffa500' : ''} />
						</div>
						<div className={styles.profile} onClick={() => navigate('/user')}>
							<CgProfile size={50} />
						</div>
						
					</>
				)}
			</div>
			<div className={styles.outlet}>
				<Outlet />
			</div>
		</div>
	);
};
